<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/unit/resource/img/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="decorator" content="ani"/>
    <title>内蒙古职工互助保障业务系统-企业端-绑定微信</title>
    <script>
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
    </script>
    <title>内蒙古职工互助保障管理系统</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        a{color:#282828;}

        .header {
            height: 150px;
            background: url("/platform/resource/img/bg1.png") center center;
            display: flex;
        }
        .header > .header-left {
            background: url("/platform/resource/img/logo_qyd.png") no-repeat center center;
            flex: 1;
        }
        .header > .header-right {
            background: url("/platform/resource/img/yxfw.png") no-repeat center center;
            flex: 1;
        }
        .body {
            height: 630px;
            background: url("/platform/resource/img/bg2.png") no-repeat center center #f7f7f7;
        }
        .content{
            margin:0px auto;
            width:1200px;
            display: flex;
            position: relative;
        }
        .body-left {
            flex: 1;
        }
        .body-right {
            flex: 1;
        }
        .right-con span{padding:10px 20px;background:#41c1f5;border-radius: 5px;color:#fff;font-size:18px;}
        .right-con{width:440px; margin: 80px 30px 0px 30px;}
        .right-con ul{margin:20px 10px;}
        .right-con ul li{line-height:45px;border-bottom:dashed 1px #333;color:#282828;list-style:square url("/platform/resource/img/li.png");}
        .distryForm form {
            width: 440px;
            min-height: 350px;
            background-color: #fff;
            margin: 80px 30px;
            display: flex;
            flex-direction: column;
            border:solid 1px #eaebee;
        }
        .form {
            margin: 0 25px;
            flex: 1;
        }
        .form-title {
            background-color: #f2f4f8;
            color:#334262;
            font-size: 20px;
            text-align: center;
            line-height: 75px;
            display:flex;
        }
        .form-title span{flex:1}
        .span-active{color:#41c1f6;border-bottom:solid 1px #41c1f6;}
        .form-user {
            background: url("${ctxStatic}/image/user.png") no-repeat center left;
            border-bottom: 1px #7b8598 solid;
        }
        input {
            margin: 25px;
            border: 0;
            font-size: 16px;
            outline: none;
        }
        .form-password {
            background: url("${ctxStatic}/image/lock.png") no-repeat center left;
            border-bottom: 1px #7b8598 solid;
        }
        .form-code {
            background: url("${ctxStatic}/image/code.png") no-repeat center left;
            border-bottom: 1px #7b8598 solid;
            position: relative;
        }
        .form-code img{
            width: 100px;
            height: 40px;
            position: absolute;
            right: 0;
            top: 15px;
            background-color: red;
        }
        .autoRegister {
            color: #757575;
            font-size: 15px;
            position: relative;
            margin-top: 10px;
        }
        .autoRegister h3 {
            color: #ad1829;
            text-align: center;
        }
        .checkbox {
            margin: 0;
        }
        .autoRegister .forget {
            position: absolute;
            right: 0;
            text-decoration: none;
            color: #757575;
        }
        /*忘记密码*/
        .autoRegister .forget:hover {
            color: #3c3c3c;
        }
        .button {
            width: 100%;
            font-size: 15px;
            border-radius: 5px;
            cursor: pointer;
        }
        .bind .button {
            background-color: #41c1f5;
            height: calc(100% - 20px);
            min-height:45px;
            margin-bottom: 20px;
            color: #fff;
            border: 0;
        }
        .register .button {
            height: calc(100% - 20px);
            margin-bottom: 20px;
            border: 1px #b71112 solid;
            background-color: #fff;
            color: #b71112;
        }
        .footer {
            height:150px;
            border-top:solid 2px #41c1f5;
            text-align: center;
            line-height: 25px;
            color: #fff;
            font-size: 14px;
        }
        .footer-con{width:1200px;margin:0px auto;display:flex;}
        .con-left{flex: 1;text-align:left;}
        .con-left a{color:#41c1f6;}
        .con-right{flex: 1;text-align:center;}
        .footer .download {
            text-decoration: none;
            color: #000;
        }
        .footer .download:hover {
            color: #0000ff;
        }
    </style>
</head>


<body>
<!--头-->
<div class="header">
    <div class="header-left"></div>
    <div class="header-right"></div>
</div>
<!--身体-->
<div class="body">
    <div class="content">
        <div class="body-left">
            <div class="distryForm">
                <form name="form" method="post" id="form">
                    <div class="form-title">
                        <span id="mmdl" class="span-active">账号绑定</span>
                    </div>
                    <div id="mmdl-pan">
                        <div class="form form-user">
                            <input type="text" oninput="userHideShow()" name="account" id="account" placeholder="单位账号">
                            <span style="color: #ad1829" hidden="hidden" id="userspan">单位账号不能为空！</span>
                        </div>
                        <div class="form form-password">
                            <input type="password" oninput="passHideShow()" name="password" id="password" placeholder="密码">
                            <span style="color: #ad1829"   hidden="hidden" id="passpan">密码不能为空！</span>
                        </div>
                        <div class="form form-code">
                            <input type="text" oninput="codeHideShow()" id="validateCode" name="validateCode" placeholder="验证码">
                            <img id="imageCode" src="/frontcode/getcode" alt="" onclick="changeCheckCode()">
                        </div>
                        <div class="form autoRegister">
                            <a href="${ctxFront}/hzunit/unit/loginIndex">返回登录</a>
                            <a href="${ctxFront}/hzunit/unit/showMember" class="forget">账号注册</a>
                            <h3 hidden="hidden" id="bindspan">单位账号或密码错误！</h3>
                        </div>
                        <div class="form bind">
                            <button type="button" class="button" id="bind">绑定</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="body-right">
            <div class="right-con">
                <a href="/hzhelp/question/category?type=0">
                    <div class="right-title">
                        <span>政策法规</span>
                    </div>
                </a>
                <ul>
                    <c:forEach items="${questions}" var="question"  varStatus="status">
                        <c:if test="${status.index < 4}">
                            <li><a href="/hzhelp/question/questionDetail?id=${question.id}">${question.name}</a></li>
                        </c:if>
                    </c:forEach>
                </ul>
            </div>
            <div class="right-con" style="margin-top:20px;">
                <a href="/hzhelp/question/category?type=2">
                    <div class="right-title">
                        <span>资料下载</span>
                    </div>
                </a>
                <ul>
                    <c:forEach items="${downloads}" var="question"  varStatus="status">
                        <c:if test="${status.index < 4}">
                            <li><a href="/hzhelp/question/questionDetail?id=${question.id}">${question.name}</a></li>
                        </c:if>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div class="body-bottom">
        </div>
    </div>
</div>
<!--脚-->
<div class="footer">
    <div class="footer-con">
        <div class="con-left">
            <div style="margin-left:100px;width:500px;color:#333333;">
                <span style="padding:8px;"><a target="_blank" href="http://www.nmghzb.cn/">官方网站</a></span>
                |<span style="padding:8px;"><a href="/hzhelp/question/category?recommend=1&menuName=helpCenter">帮助中心</a></span>
                <div>
					<span>
						主办：内蒙古职工互助保障协会   联系电话：0471-5222866 <br>
						地址：呼和浩特赛罕区腾飞南路28号如意大厦A座<br>
						技术支持：内蒙古汇联科技有限公司<br>
						建议使用google、Firefox、IE9以上浏览器
				    </span>
                    <a style="color:red;" href="http://chromecore.boang2.cn/" target="_blank"class="download">下载谷歌浏览器</a>
                </div>
            </div>
        </div>
        <div class="con-right">
            <div style="width:200px;margin:20px;">
                <div style="width:20px;float:left;color:#41c1f6;line-height:20px;">
                    微信公众号
                </div>
                <div style="float:left;"><img src="/platform/resource/img/wx.png" width="100px" height="100px"></div>
            </div>
        </div>
    </div>
</div>
<script>
    //图片点击事件刷新验证码
    function changeCheckCode() {
        var img = document.getElementById("imageCode");
        img.src="/frontcode/getcode?isd="+new Date().getTime();
    }

    $(function () {
        changeCheckCode();
        //用户名，密码为空不可点击登录
        var userflag=false;
        var passflag=false;
        var codeflag=false;
        $("#bind").click(function () {
            var account = $("#account").val();
            var password = $("#password").val();
            var validateCode = $("#validateCode").val();
            var rememberMe = $("#rememberMe").val();
            if (account=='' || account==null){
                $("#userspan").show();
            }else{
                userflag=true;
            }
            if (password=='' || password==null){
                $("#passpan").show();
            }else{
                passflag=true;
            }
            if(userflag&&passflag){
                if (validateCode=='' || validateCode==null){
                    $("#bindspan").html("请输入验证码！");
                    $("#bindspan").show();
                }else{
                    $.ajax({
                        url:'/frontcode/checkcode',
                        type:'get',
                        dataType:"json",
                        async:false,
                        data:{"code":validateCode},
                        success:function (data) {
                            if (data.flag){//验证码通过
                                codeflag=true;
                                bind();
                            } else {//验证码不通过
                                codeflag=false;
                                $("#bindspan").html(data.msg);
                                $("#bindspan").show();
                            }
                        },
                        error:function () {
                            $("#bindspang").html("系统内部错误！");
                            $("#bindspan").show();
                        }
                    });
                }
            }
            // 账号绑定
            function bind(){
                $("#userspan").hide();
                $("#passpan").hide();
                $("#bindspan").hide();
                userflag=false;
                passflag=false;
                $.ajax({
                    url:'${ctxFront}/weChatUnitLogin/bindUnitAccount',
                    type:'post',
                    data:{"account":account,"password":password,"validateCode":validateCode,"rememberMe":rememberMe,"openId":"${openId}"},
                    dataType:'json',
                    async:false,
                    success:function (data) {
                        var flag = data.success;//登陆成功
                        var msg = data.msg;//登录信息
                        if(flag){
                            window.location.href = "/unit/index";
                        }else {
                            $("#bindspan").html(msg);
                            $("#bindspan").show();
                            changeCheckCode();//刷新验证码
                        }
                    },
                    error:function () {
                        $("#bindspan").html("系统出错！");
                        $("#bindspan").show();
                        changeCheckCode();//刷新验证码
                    }
                })
            }
        });
    })

    //隐藏账号提示框
    function userHideShow(){
        $("#userspan").hide();
        $("#bindspan").hide();
    }
    //隐藏密码提示框
    function passHideShow(){
        $("#passpan").hide();
        $("#bindspan").hide();
    }
    //隐藏验证码提示框
    function codeHideShow(){
        $("#bindspan").hide();
    }
</script>
</body>
</html>